<template>
  <div>
    <header >
      <section class="info-container">
        <router-link to="/login" class="info-position">
          <img src="../../../src/assets/logo.png" class="user-logo">
          <span class="user-phone" v-if="userInfo">
            {{ userInfo.username }}
          </span>
          <span class="user-phone" v-else>
            未登录
          </span>
        </router-link>
        <div class="info-message">
          <i class="el-icon-setting info-icon"></i>
          <i class="el-icon-chat-dot-square info-icon"></i>
        </div>
      </section>
    </header>
    <div class="my-assets">
      <div class="assets item">
        <i class="el-icon-wallet"></i>
        <span style="font-size: small">我的资产</span>
      </div>
      <span style="color: #9e9e9e;font-size: large ; font-weight: lighter">|</span>
      <div class="red-bag item">
        <i class="el-icon-message icon"></i>
        <span class="title">红包</span>
        <span class="message">查看红包</span>
      </div>
      <div class="coupon item">
        <i class="el-icon-bank-card icon"></i>
        <span class="title">券包</span>
        <span class="message">查看券</span>
      </div>
      <div class="score item">
        <i class="el-icon-postcard icon"></i>
        <span class="title">积分</span>
        <span class="message">查看积分</span>
      </div>
    </div>

    <div class="more-actions">
      <div class="assets item">
        <i class="el-icon-location-information icon"></i>
        <span class="title">我的地址</span>
      </div>
      <div class="red-bag item">
        <i class="el-icon-service icon"></i>
        <span class="title">我的客服</span>
      </div>
      <div class="coupon item">
        <i class="el-icon-shopping-cart-full icon"></i>
        <span class="title">购物车</span>
      </div>
      <div class="score item">
        <i class="el-icon-star-off icon"></i>
        <span class="title">店铺关注</span>
      </div>
      <div class="assets item">
        <i class="el-icon-coordinate icon"></i>
        <span class="title">企业订餐</span>
      </div>
      <div class="assets item">
        <i class="el-icon-bicycle icon"></i>
        <span class="title">邀友跑单</span>
      </div>
      <div class="assets item">
        <i class="el-icon-office-building icon"></i>
        <span class="title">商务合作</span>
      </div>
      <div class="assets item">
        <i class="el-icon-aim icon"></i>
        <span class="title">公益三小时</span>
      </div>
      <div class="assets item">
        <i class="el-icon-warning-outline icon"></i>
        <span class="title">资质与规则</span>
      </div>
      <div class="assets item">
        <i class="el-icon-notebook-2 icon"></i>
        <span class="title">发票助手</span>
      </div>
      <div class="assets item">
        <i class="el-icon-mobile icon"></i>
        <span class="title">评价中心</span>
      </div>
      <div class="assets item">
        <i class="el-icon-sunny icon"></i>
        <span class="title">碳账户</span>
      </div>
    </div>
    <footerCom :isClick="3"></footerCom>
  </div>
</template>

<script lang="ts">
import { IuserInfo } from '@/store/types';
import { Component, Prop, Vue } from 'vue-property-decorator';
import {State} from "vuex-class";
const namespace = "profile"

@Component({})
export default class HelloWorld extends Vue {
  @State('userInfo' , { namespace }) userInfo = undefined as IuserInfo | undefined; //当前定位
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">
ul,ol,li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
.router-link-active {
  text-decoration: none;
  color: black;
}
header {
  .info-container {
    background-color: #f5f5f5;
    margin: 2vw 4vw;
    padding: 12px 6px ;
    display: flex;
    justify-content: space-between;
    .info-position {
      display: flex;
      align-items: center;
      .user-logo {
        width: 1.5em;
        border: #9e9e9e solid 1px;
        border-radius: 50%;
        padding: 2px;
      }
      .user-phone {
        //margin: 0;
        margin-left: 0.5em;
        font-size: large;
        font-weight: bold;
      }
    }
    .info-message {
      .info-icon {
        font-size: 1.5em;
        margin: 0 6px;
        font-weight: bold;
      }
    }
  }
}

.my-assets {
  margin: 2vw 5vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 8px;
  background-color: #ffffff;
  .item {
    padding: 2vw ;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .message {
    color: #acacac;
    font-size: small;
    font-weight: lighter;
  }
  .icon{
    font-size: 1.5em;
    color: #ec6d4b;
  }
  .title {
    font-size: small;
    font-weight: bold;
  }
  .assets {
    .el-icon-wallet {
      font-size: 1.5em;
      color: #333333;
    }
  }

}

.more-actions {
  background-color: #ffffff;
  margin: 5vw 5vw;
  display: grid;
  grid-template-columns: auto auto auto auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 8px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  .item {
    padding: 4vw 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .icon{
    font-weight: 900;
    font-size: 20px;
  }
  .title {
    margin-top: 1vw;
    font-size: x-small;
  }
}
</style>



